<template>
  <div class="monitoringDevice-root">
    <formTitleVue
      title="监测设备信息"
      :selectOptions="selectOptions"
      @selectChange="selectChange"
    />
    <!-- <div id="echarts-types"></div> -->
    <myPieRingMultilayer domId="overview-monitoringDevice-echarts" height="24.6vh" :chartsData="chartsData" :myOption="echartsOption"
                         @titleClick="titleClick"/>
    <deviceDialog
      :dialogVisible="dialogVisible"
      :searchParams="searChForm"
      @close="titleClick(true)"
    ></deviceDialog>
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import myPieRingMultilayer from '@/components/Echarts/myPieRingMultilayer.vue';
import { time_select_optios } from '@/utils/global.js';
import { deviceStatistics } from '@/api/alarm/statistics'
import deviceDialog from "./deviceDialog.vue"

export default {
  name: "monitoringDevice",
  components: {
    formTitleVue,myPieRingMultilayer,deviceDialog
  },
  data() {
    return {
      selectOptions: [
        {
          selectValue: "近一月",
          options:[
            { label: "近一月", value: "近一月" },
            { label: "近半年", value: "近半年" },
            { label: "近一年", value: "近一年" },
          ]
        }
      ],
      chartsData: {
        xData: ["市政设施", "房屋建筑", "交通设施", "人员密集区域"],
        yData: [],
      },
      echartsOption:{
        label: {
          normal: {
            show: false,
          },
        },
        labelLine: {
          show: false,
        },
      },
      searChForm: {
        startTime: '',
        endTime: '',
      },
      dialogVisible:false
    };
  },
  methods: {
    titleClick(isClose){
      if(isClose){
        this.dialogVisible = false
        return
      }
       console.log("点击标题abc=====>")
      this.dialogVisible = true
    },
    selectChange(item) {
      // console.log(item);
      this.searChForm.startTime = time_select_optios[item].startTime
      this.searChForm.endTime = time_select_optios[item].endTime
      this.getData()
    },
    getData(){
      let params ={
        startTime:this.searChForm.startTime+" 00:00:00",
        endTime:this.searChForm.endTime+" 23:59:59",
        areaCode:this.$store.state.account.user.deptIds
      }
      deviceStatistics(params).then(res=>{
        if(res.code==200){
          let data = res.data.report
          this.chartsData.yData = [
            {
              name:"报警等级分布",
              // radius : ['40%', '60%'],
              center: ["22%", "50%"],
              data: data
            }
          ]
          let total = 0
          // 给每个饼块统一添加引导文字
          this.chartsData.yData.forEach(item => {
            item.data.forEach(item => {
              // 隐藏引导线和文字
              item.label = {
                normal:{
                  show: false,
                  formatter: "{b}\n{d}%",
                },
              }
              item.labelLine = {
                show: false,
              }
              total += item.value
            })
          })
          this.echartsOption = {
            title:{
              text: total,
              left: "21%",
              top: "36%",
              // textVerticalAlign:'top',
              textAlign:'center',
              textStyle: {
                color: "#4293f6",
                fontSize: this.$commonJs.adjustSize(30),
                fontWeight: '500',
              },
              subtext: '总数',
              subtextStyle: {
                verticalAlign:'top',
                color: "#333333",
                fontSize: this.$commonJs.adjustSize(20),
                // fontWeight: '600',
              },
              triggerEvent: true
            },
            legend:{
              orient: 'vertical',
              top: 'middle',
              right: '6%',
              itemGap: this.$commonJs.adjustSize(10),
              // formatter: 'Legend {name}',
              // 使用回调函数
              formatter: function (name) {
                for(let index in data){
                  let item = data[index]
                  if(item.name == name){
                    let p
                    if(total == 0 || !item.value){
                      p = 0
                    }else{
                      p = (item.value/total*100).toFixed(1)
                    }
                    // return `{name|${name}} {count|总数 ${item.value}} {count|覆盖率：${p}%}`
                    let net
                    if(total == 0 || !item.netStateCount){
                      net = 0
                    }else{
                      net = (item.netStateCount/total*100).toFixed(1)
                    }
                    // let nClass = index == 0 ? 'a' : 'b'
                    // let nameClass = 'name' + nClass
                    // console.log(nameClass)
                    if(index == 0){
                      return `{nameb|${name}} {nameb|总数 ${item.value}} \n {count2|在线率：${net}%} {count|覆盖率：${p}%}`
                    }else{
                      return `{nameb|${name}} {nameb|总数 ${item.value}} \n {count2|在线率：${net}%} {count|覆盖率：${p}%}`
                    }
                  }
                }
              },
              textStyle:{
                rich: {
                  name: {
                    fontSize: this.$commonJs.adjustSize(16),
                    // width: this.$commonJs.adjustSize(60),
                    height: this.$commonJs.adjustSize(20),
                    padding: [0, 0, 24, 4], //下，右，上，左
                  },
                  nameb: {
                    fontSize: this.$commonJs.adjustSize(16),
                    // width: this.$commonJs.adjustSize(60),
                    height: this.$commonJs.adjustSize(20),
                    padding: [0, 0, 0, 4], //下，右，上，左
                  },
                  count:{
                    color: '#83878b',
                    fontSize: this.$commonJs.adjustSize(14),
                    // width: this.$commonJs.adjustSize(60),
                    height: this.$commonJs.adjustSize(14),
                    padding: [0, 0, 0, 0],
                  },
                  count2:{
                    color: '#83878b',
                    fontSize: this.$commonJs.adjustSize(14),
                    // width: this.$commonJs.adjustSize(100),
                    height: this.$commonJs.adjustSize(14),
                    padding: [0, 0, 0, 0],
                  },
                }
              },
            }
          }
        }
      })
      // ============================
      // console.log(this.searChForm);
      // 模拟接口数据
      // let res = [
      //   {value: 335, name: '市政设施'},
      //   {value: 110, name: '房屋建筑'},
      //   {value: 530, name: '人员密集区域'},
      //   {value: 383, name: '交通设施'},
      //   {value: 201, name: '在建工地'},
      // ]
      //
      // this.chartsData.yData = [
      //   {
      //     name:"报警等级分布",
      //     // radius : ['40%', '60%'],
      //     center: ["22%", "50%"],
      //     data: res
      //   }
      // ]
      // let total = 0
      // // 给每个饼块统一添加引导文字
      // this.chartsData.yData.forEach(item => {
      //   item.data.forEach(item => {
      //     // 隐藏引导线和文字
      //     item.label = {
      //       normal:{
      //         show: false,
      //         formatter: "{b}\n{d}%",
      //       },
      //     }
      //     item.labelLine = {
      //       show: false,
      //     }
      //     total += item.value
      //   })
      // })
      // this.echartsOption = {
      //   title:{
      //     text: `设备`,
      //     left: "21%",
      //     top: "42%",
      //     textVerticalAlign:'top',
      //     textAlign:'center',
      //     textStyle: {
      //       color: "#5A5A5A",
      //       fontSize: 12,
      //     },
      //     subtext: total,
      //     subtextStyle: {
      //       // verticalAlign:'top',
      //       color: "#5A5A5A",
      //       fontSize: 16,
      //     },
      //   },
      //   legend:{
      //     // orient: 'vertical',
      //     top: 'middle',
      //     right: '2%',
      //     // formatter: 'Legend {name}',
      //     // 使用回调函数
      //     formatter: function (name) {
      //       for(let item of res){
      //         if(item.name == name){
      //           let p
      //           if(total == 0 || !item.value){
      //             p = 0
      //           }else{
      //             p = (item.value/total*100).toFixed(2)
      //           }
      //           return `${name} 总数${item.value} 占比${p}%`
      //         }
      //       }
      //     }
      //   }
      // }
    },
  },
  mounted() {
    this.selectChange(this.selectOptions[0].selectValue)
  },
};
</script>

<style lang="scss" scoped>
.monitoringDevice-root {

}
</style>
